import React, { Component } from "react";
import { Modal, Tooltip, Form, Table, Row, Col, Spin } from 'antd';
import ScModal from '../../../components/feedback/scModal';
import { getOrderDetail } from "../../../fetch/fetchApi";

const FormItem = Form.Item;
class OrderDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            detailData: {}
        }
    }

    getOrderDetail(id) {
    	this.props.handle();
        this.setState({
            spinning: true
        })
        getOrderDetail({
            orderId: id
        }).then((resData) => {
            if (resData.data.code === '200') {
                this.setState({
                    detailData: resData.data.data,
                    spinning: false
                });
            } else {
                this.setState({
					spinning: false
                })
            }
        })

    }

    componentDidMount() {
        this.getOrderDetail(this.props.orderId);
    }

    componentWillReceiveProps(nextProps) {
        //if (nextProps.orderId !== this.props.orderId) {
        if(nextProps.orderId){
            this.setState({
                detailData: {}
            })
            this.getOrderDetail(nextProps.orderId);
        }
    }

    filterDataHandler(t) {
        return t !== null ? t : '--';
    }

    render() {
        return (
            <Spin spinning={this.state.spinning}>
				<div className="modal-list">
					<div className={"modal-flex"}>
						<div className={"modal-flex-1"}>
						<ul>
							<li>
								<strong>平台订单号:</strong>
								<span>{this.filterDataHandler(this.state.detailData.id)}</span>
							</li>
							<li>
								<strong>业务订单号:</strong>
								<span>{this.filterDataHandler(this.state.detailData.outOrderId)}</span>
							</li>
							<li>
								<strong>充电应用:</strong>
								<span>{this.filterDataHandler(this.state.detailData.appStr)}</span>
							</li>
							<li>
								<strong>充电用户:</strong>
								<span style={{
								width: 100
								}}>{this.filterDataHandler(this.state.detailData.account)}</span>
							</li>
							<li>
								<strong>充电时间:</strong>
								<span>{this.filterDataHandler(this.state.detailData.timeStart)} - {this.filterDataHandler(this.state.detailData.timeEnd)}</span>
							</li>
							<li>
								<strong>电桩编号:</strong>
								<span>{this.filterDataHandler(this.state.detailData.stubId)}</span>
							</li>
							<li>
								<strong>电站名称:</strong>
								<span>{this.filterDataHandler(this.state.detailData.stubGroupName)}</span>
							</li>
							<li>
								<strong>运营类型:</strong>
								<span>{this.filterDataHandler(this.state.detailData.stubGroupType === null ? '--' : (this.state.detailData.stubGroupType === 0 ? '非自营' : '自营'))}</span>
							</li>
							<li>
								<strong>电站城市:</strong>
								<span>{this.filterDataHandler(this.state.detailData.cityStr)}</span>
							</li>
							<li>
								<strong>支付方式:</strong>
								<span>{this.filterDataHandler(this.state.detailData.payTypeInfo)}</span>
							</li>
						</ul>
						</div>
						<div className={"modal-flex-1"}>
							<ul>
							<li>
								<strong>充电电量:</strong>
								<span>{this.filterDataHandler(this.state.detailData.power)}</span>
							</li>
							<li>
								<strong>充电时长:</strong>
								<span>{this.filterDataHandler(this.state.detailData.chargeTime)}</span>
							</li>
							<li>
								<strong>充电状态:</strong>
								<span>{this.filterDataHandler(this.state.detailData.status === 9 ? '充电完成' : '充电中')}</span>
							</li>
							<li>
								<strong>订单金额:</strong>
								<span>{this.filterDataHandler(parseFloat(this.state.detailData.feeTotal) + parseFloat(!this.state.detailData.feeDiscount ? 0 : (this.state.detailData.feeDiscount[0] + this.state.detailData.feeDiscount[1])))}</span>
							</li>
							<li>
								<strong>折扣类型:</strong>
								<span>{this.filterDataHandler(this.state.detailData.discountTypeStr)}</span>
							</li>
							<li>
								<strong>折扣金额:</strong>
								<span>{this.filterDataHandler(!this.state.detailData.feeDiscount ? '--' : (this.state.detailData.feeDiscount[0] + this.state.detailData.feeDiscount[1]))}</span>
							</li>
							<li>
								<strong>应付金额:</strong>
								<span>{this.filterDataHandler(this.state.detailData.feeTotal)}</span>
							</li>
							<li>
								<strong>抵扣金额:</strong>
								<span>{this.filterDataHandler(this.state.detailData.voucherMoney)}</span>
							</li>
							<li>
								<strong>实付金额:</strong>
								<span>{this.filterDataHandler(this.state.detailData.accountMoney)}</span>
							</li>
							<li>
								<strong>停止原因:</strong>
								<span>{this.filterDataHandler(this.state.detailData.endInfo)}</span>
							</li>
							<li>
								<strong>退款状态:</strong>
								<span>{this.filterDataHandler(this.state.detailData.payType === 2 ? !this.state.detailData.refundStatus ? '无需退款' :
								(this.state.detailData.refundStatus === 0 ? '退款失败' : '退款成功') : '---')}</span>
							</li>
							</ul>
						</div>
					</div>
				</div>
        	</Spin>
        )
    }
}
export default OrderDetail;
